<template>
	<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="2000" :circular="true"
		indicator-active-color="#EE8131">
		<swiper-item v-for="item in bannerData" :key="item._id">
			<image :src="item.imagePath"></image>
		</swiper-item>
	</swiper>
</template>

<script setup>
	import { onMounted, ref } from "vue";
	import { getBannerApi } from "../../api/home";

	const bannerData = ref([]);

	onMounted(() => {
		getData();
	})

	function getData() {
		getBannerApi({ show: 1 })
			.then(res => {
				if (res.code == 200) {
					bannerData.value = res.data.rows;
				}
			})
	}
</script>

<style scoped lang="scss">
	.banner {
		height: 354rpx;

		image {
			// width: 100%;
			// height: 100%;
			height: 304rpx;
			width: 100%;
		}
	}
</style>